import React, { Component } from 'react'
import {Row, Col, Card, Icon } from 'antd'
import chart1 from './chart1'
import chart2 from './chart2'
import chart3 from './chart3'

export default class Welcome extends Component {
    constructor(props) {
        super(props);
        this.state={

        }
    }
    componentDidMount() {
        chart1();
        chart2();
        chart3();
    }
    
    render() {
        const span4 = 4;
        const gutterBox = {
            // background: '#00A0E9',
            cursor:'pointer',
            padding:'50px 0',
        };
        const centerCenterColumn = {
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'nowrap',
            alignItems: 'center',
            justifyContent: 'center',
        };
        return(
            <div>
                <Row type="flex" justify="space-around">
                    <Col style={gutterBox} span={5}>
                        <Card bodyStyle={{height:'150px',width:'100%',...centerCenterColumn}}>
                            <Icon type="area-chart" style={{fontSize:'70px',color:'gold',margin:'10px'}} />
                            <div className='center-center-column' style={{marginRight:'10px',color:'#666'}}>
                                <span style={{fontSize:'16px'}}>齐套率</span>
                                <span style={{fontSize:'40px',fontWeight:'bold'}}>90%</span>
                            </div>
                        </Card>
                    </Col>
                    <Col style={gutterBox} span={5}>
                        <Card bodyStyle={{height:'150px',width:'100%',...centerCenterColumn}}>
                            <Icon type="team" style={{fontSize:'70px',color:'rgb(143, 201, 251)',margin:'10px'}} />
                            <div className='center-center-column' style={{marginRight:'10px',color:'#666'}}>
                                <span style={{fontSize:'16px'}}>看单情况</span>
                                <span style={{fontSize:'40px',fontWeight:'bold'}}>1650</span>
                            </div>
                        </Card>
                    </Col>
                    <Col style={gutterBox} span={5}>
                        <Card bodyStyle={{height:'150px',width:'100%',...centerCenterColumn}}>
                            <Icon type="shopping-cart" style={{fontSize:'70px',color: 'rgb(216, 151, 235)',margin:'10px'}} />
                            <div className='center-center-column' style={{marginRight:'10px',color:'#666'}}>
                                <span style={{fontSize:'16px'}}>运单情况</span>
                                <span style={{fontSize:'40px',fontWeight:'bold'}}>1630</span>
                            </div>
                        </Card>
                    </Col>
                    <Col style={gutterBox} span={5}>
                        <Card bodyStyle={{height:'150px',width:'100%',...centerCenterColumn}}>
                            <Icon type="car" style={{fontSize:'70px',color: 'rgb(246, 152, 153)',margin:'10px'}} />
                            <div className='center-center-column' style={{marginRight:'10px',color:'#666'}}>
                                <span style={{fontSize:'16px'}}>车辆情况</span>
                                <span style={{fontSize:'40px',fontWeight:'bold'}}>1555</span>
                            </div>
                        </Card>
                    </Col>
                </Row>
                <Row>
                    <Col span={23} offset={1}>
                        <div id='barChart3' style={{width: '98%', height: '400px'}}></div>
                    </Col>
                    <Col span={11} offset={1}>
                        <div id='barChart' style={{width: '90%', height: '400px'}}></div>
                    </Col>
                    <Col span={12}>
                        <div id='barChart2' style={{width: '90%', height: '400px'}}></div>
                    </Col>
                </Row>
            </div>
        )
    }
}
